vuejs之组件中的data为什么必须是函数

我们先来测试一下，看看组件中能否直接访问Vue实例中的data：

解析：组件去访问message，message定义在Vue实例的data中，页面最终并没有显示结果，（抛出错误：[Vue warn]: Property or method "message" is not defined）。

既然组件是一个单独功能模块的封装，有属于自己的html模板，那也应该有数据属性data。

尝试在组件注册函数，添加data：

控制台报错：

vue.js:634 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. 

翻译过来意思是：“data”选项应该是在组件定义中返回每个实例值的函数。

从这里我们首先获得的信息：data在组件中必须是个函数，这点尤为关键，与Vue实例下的data不同。接着将data改为函数形式，并且返回一个对象，对象内部保存着数据。

组件实例（对象）：每使用一次组件标签，就会创建相应的一个组件实例对象。

这个问题好比下图：

abc函数返回一个对象，当它被调用3次后，所返回的obj1，obj2，obj3三者是否一样？弄懂了这个问题，自然而然也就悟了。

验证：

 假设obj1，obj2，obj3内存中指向的是同一个对象，那么我修改了obj1.name，其余obj2,和obj3的name值也会随之变化。但输出结果两者的name并没有改变，这就足以说明每次调用abc函数，返回的对象都是互相独立的，没有任何引用关系。

如果是下面的情形，则每次返回的对象指向同一内存地址；

 因为返回的obj是变量名，保存一个对象的地址，而地址只有一个（与直接返回对象体有很大区别）。

效果如下：

组件中的data写成函数形式：如果复用组件的话，它们并不是共享同一个对象，每次调用组件的时候，data属性都会return一个新的对象（函数在每次执行时都会创建一个新的栈空间，它们的内存地址都不一样），保证各个组件之间使用变量不会相互影响，组件复用也要考虑每个复用的地方有自己的逻辑。

一句话每个组件像人一样都需要有一片空间（data）来保存属于自己的状态。